<template>
  <div class="person">
    <h2>水温达到60℃时，或水温达到80cm,给服务器发请求</h2>
    <h2>当前水温：{{ temp }} ℃</h2>
    <h2>当前水位：{{ waterHeight }} cm</h2>
    <h2>结果：{{ sum }}</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import {ref,watch,watchEffect} from 'vue'
    let temp = ref(10)
    let waterHeight = ref(0)
    let sum  = ref(0)
    function changeTemp(){
        temp.value += 10;
    }
    function changeHeight(){
        waterHeight.value += 10;
    }
    // watch实现
    // watch([temp,waterHeight],(value)=>{
    //     let [newTemp,newHeight] = value
    //     if(newTemp >= 60 || newHeight >= 80){
    //         console.log('发送请求');
    //         sum.value += 1
    //     }
    // })

    // 有问题待确认？无法同时监视两个？？？
    watchEffect(()=>{
        if(temp.value >= 60 || waterHeight.value >= 80){
            // console.log('发送请求');
            sum.value += 1
            console.log(`propA is ${temp.value}, propB is ${waterHeight.value}, sum is ${sum.value}`);
        }
    })

</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
</style>